<template>
        <ol class="breadcrumb" id="breadcrumb">
            <li class="breadcrumb-item" v-for="(v, i) in $attrs.Breadcrumbs" :class="active(i)" :key="i"><span v-if="i+1 == $attrs.Breadcrumbs.length" :aria-current="page(i)" v-text="v.title" ></span> <span v-else @click="link(v)" class="text-info"   v-text="v.title"></span></li>
        </ol>
</template>

<script>
export default {
  name: "Breadcrumb1",
  
  mounted(){
      console.log(this.$attrs)
  },
  methods: {
      link (v) {
          this.$router.push({ name: v.name, params:v.params})
      },
      active (i) {
          if(i+1 === this.$attrs.Breadcrumbs.length) {
              return "active"
          }
      },
      page(i) {
          if(i+1 === this.$attrs.Breadcrumbs.length) {
              return "page"
          }
      }
  }

};
</script>

<style scoped>
.text-info {
    cursor: pointer;
}
#breadcrumb {
    padding: 0; 
    margin-bottom: 0; 
    list-style: none;
    background-color: rgba(0,0,0,0); 
    border-radius: 0; 
}
</style>